<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="配种日期：">
      <el-date-picker
        v-model="formInline.sDate"
        type="date"
        placeholder="请选择日期"
        style="width: 150px"
      />--
      <el-date-picker
        v-model="formInline.oDate"
        type="date"
        placeholder="请选择日期"
        style="width: 150px"
      />
    </el-form-item>
    <el-form-item label="种母耳号：">
      <el-input
        v-model="formInline.motherEarNumber"
        placeholder="请输入种母耳号"
      />
    </el-form-item>
    <el-form-item label="负责人：">
      <el-input
        v-model="formInline.leader"
        placeholder="请输入负责人"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="danger" @click="getData">查询</el-button>
      <el-button>重置</el-button>
    </el-form-item>
  </el-form>
  <el-button type="danger" style="margin-bottom: 10px" @click="getAdd"
    >+新增</el-button
  >
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column
      prop="pigsBreedingId"
      label="序号"
      align="center"
      width="80px"
    />
    <el-table-column
      prop="eventDate"
      label="配种日期"
      sortable
      align="center"
      width="180px"
    >
      <template #default="scoped">
        {{ scoped.row.eventDate.substr(0, 19).replace("T", " ") }}
      </template>
    </el-table-column>
    <el-table-column
      prop="lastBreedingDate"
      label="上次配种日期"
      align="center"
      width="180px"
    >
      <template #default="scoped">
        {{ scoped.row.lastBreedingDate.substr(0, 19).replace("T", " ") }}
      </template>
    </el-table-column>
    <el-table-column
      prop="earNumber"
      label="耳号"
      align="center"
      width="100px"
    />
    <el-table-column
      prop="varietiesName"
      label="种母品种"
      align="center"
      width="100px"
    />
    <el-table-column
      prop="fatherEarNumber"
      label="首配公猪"
      align="center"
      width="100px"
    />
    <el-table-column
      prop="varietiesName"
      label="种公品种"
      align="center"
      width="100px"
    />
    <el-table-column
      prop="breedingmethodName"
      label="配种方式"
      align="center"
      width="150px"
    >
    </el-table-column>
    <el-table-column
      prop="estrustype"
      label="种母发情类型"
      align="center"
      width="180px"
    >
      <template #default="scoped">
        <el-text v-if="scoped.row.estrustype == 1">自然发情</el-text>
        <el-text v-else>同期发情</el-text>
      </template>
    </el-table-column>
    <el-table-column
      prop="firstmatchrating"
      label="首配评分"
      align="center"
      width="100px"
    />
    <el-table-column
      prop="currentbuilding"
      label="当前栋舍"
      align="center"
      width="180px"
    >
    </el-table-column>
    <el-table-column
      prop="currentfield"
      label="当前栏位"
      align="center"
      width="150px"
    >
    </el-table-column>
    <el-table-column
      prop="bedroomName"
      label="转入栋舍"
      align="center"
      width="150px"
    />
    <el-table-column
      prop="fieldName"
      label="转入栏位"
      align="center"
      width="150px"
    />
    <el-table-column
      prop="reproductivestatus"
      label="繁殖状态"
      align="center"
      width="150px"
    >
      <template #default="scoped">
        <el-text v-if="scoped.row.reproductivestatus == 1">后备空怀</el-text>
        <el-text v-else-if="scoped.row.reproductivestatus == 2"
          >返情空怀</el-text
        >
        <el-text v-else-if="scoped.row.reproductivestatus == 3"
          >未孕空怀</el-text
        >
        <el-text v-else-if="scoped.row.reproductivestatus == 4"
          >流产空怀</el-text
        >
        <el-text v-else-if="scoped.row.reproductivestatus == 5"
          >空胎空怀</el-text
        >
        <el-text v-else-if="scoped.row.reproductivestatus == 6"
          >断奶空怀</el-text
        >
        <el-text v-else-if="scoped.row.reproductivestatus == 7">妊娠</el-text>
        <el-text v-else>哺乳</el-text>
      </template>
    </el-table-column>
    <el-table-column
      prop="eventDate"
      label="事件日期"
      align="center"
      width="180px"
    >
      <template #default="scoped">
        {{ scoped.row.eventDate.substr(0, 19).replace("T", " ") }}
      </template>
    </el-table-column>
    <el-table-column
      prop="leader"
      label="负责人"
      align="center"
      width="150px"
    />
    <el-table-column
      prop="createdOwner"
      label="创建人"
      align="center"
      width="150px"
    />
    <el-table-column
      prop="createdTime"
      label="创建时间"
      sortable
      align="center"
      width="180px"
    >
      <template #default="scoped">
        {{ scoped.row.createdTime }}
      </template>
    </el-table-column>
    <el-table-column
      prop="updateOwner"
      label="修改人"
      align="center"
      width="150px"
    />
    <el-table-column
      prop="updateTime"
      label="修改时间"
      align="center"
      width="180px"
    >
      <template #default="scoped">
        {{ scoped.row.updateTime }}
      </template>
    </el-table-column>
    <el-table-column
      prop="examineOwner"
      label="审核人"
      align="center"
      width="150px"
    />
    <el-table-column
      prop="examineTime"
      label="审核时间"
      align="center"
      width="180px"
    />
    <el-table-column
      prop="documentNo"
      label="单据号"
      align="center"
      width="180px"
    />
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button
          link
          type="primary"
          @click="handleEdit(scope.row.pigsBreedingId)"
          >编辑</el-button
        >
        <el-button
          link
          type="primary"
          @click="handleDelete(scope.row.pigsBreedingId)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <table>
    <tr>
      <td>
        <el-pagination
          v-model:current-page="formInline.pageIndex"
          v-model:page-size="formInline.pageSize"
          :page-sizes="[3, 5, 8, 10]"
          :background="true"
          layout="total,slot, prev, pager, next"
          :total="formInline.totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          prev-text="上一页"
          next-text="下一页"
        >
          ，当前{{ formInline.pageIndex }}/{{
            formInline.pageCount
          }}页，每页显示{{ formInline.pageSize }}条
          <el-button
            class="btn-prev"
            link
            @click="handleCurrentChange(1)"
            :disabled="formInline.pageIndex == 1"
            >首页</el-button
          >
        </el-pagination>
      </td>
      <td>
        <el-pagination
          v-model:current-page="formInline.pageIndex"
          v-model:page-size="formInline.pageSize"
          :page-sizes="[3, 5, 8, 10]"
          :background="true"
          layout="slot, sizes,jumper"
          :total="formInline.totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          prev-text="上一页"
          next-text="下一页"
        >
          <el-button
            class="btn-prev"
            link
            @click="handleCurrentChange(formInline.pageCount)"
            :disabled="formInline.pageIndex == formInline.pageCount"
            >尾页</el-button
          >
        </el-pagination>
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const router = useRouter();
const route = useRoute();

//多选
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};
//新增
const getAdd = () => {
  router.push("/PigsBreedingAdd");
};
//种母配种显示
const formInline = reactive({
  sDate: null,
  oDate:null,
  leader: '',
  pageIndex: 1,
  pageSize: 3,
  totalCount: 0,
  pageCount: 0,
});

const tableData = ref([]);
//种母配种显示
const getData = () => {
  axios
    .post(apiBedinUrl+"/api/PigBreedings/SearchPigsBreeding", {
      sDate: formInline.sDate,
      oDate: formInline.oDate,
      leader: formInline.leader,
      pageIndex: formInline.pageIndex,
      pageSize: formInline.pageSize,
    })
    .then((res) => {
      console.log("种母配种", res.data);
      tableData.value = res.data.data.list;
      formInline.pageCount = res.data.data.pageCount;
      formInline.totalCount = res.data.data.totalCount;
    });
};

//分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  formInline.pageSize = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  formInline.pageIndex = val;
  getData();
};
//编辑
const handleEdit = (pigsBreedingId: number) => {
  console.log(pigsBreedingId);
};
//删除
const handleDelete = (pigsBreedingId: number) => {
  console.log(pigsBreedingId);
  ElMessageBox.confirm("确认删除吗?", "警告", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      axios
        .post(apiBedinUrl+"/api/PigBreedings/DeletePigsBreeding", {
          pigsBreedingId: pigsBreedingId,
        })
        .then((res) => {
          console.log("种母配种删除", res.data.data);
          if (res.data.code == 0) {
            ElMessage.success("删除种母配种成功");
            getData();
          } else {
            ElMessage.error("删除种母配种失败");
          }
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};
//生命周期钩子
onMounted(() => {
  getData();
});
</script>

<style scoped></style>
